<template>
  <div class="chart-container">
    <div ref="chartRef" class="chart"></div>
    <div v-if="$route.path === '/page1'" class="conclusion-box">
      <h3>开发者年龄分布</h3>
      <div v-html="conclusionContent"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import axios from "axios";

const chartRef = ref(null);
const conclusionContent = ref(""); // 响应式变量，用于存储结论内容
const chartData = ref([]); // 响应式变量，用于存储图表数据

const chartApiUrl = "http://127.0.0.1:8080/api/age-percent/stats";
const conclusionApiUrl = "http://127.0.0.1:8080/api/age-percent/conclusion";

// 初始化图表
const initChart = () => {
  if (!chartRef.value) {
    console.error("chartRef.value is null. Please check the ref binding.");
    return;
  }
  const myChart = echarts.init(chartRef.value);

  const option = {
    backgroundColor: '#142846',
    title: {
      text: "开发者年龄分布",
      left: "center",
      textStyle: {
        color: "#1e90ff",
        fontSize: 20,
        fontWeight: 'bold',
        textShadowColor: '#1e90ff88',
        textShadowBlur: 8
      }
    },
    tooltip: {
      trigger: "item",
      backgroundColor: '#1e2330',
      borderColor: '#1e90ff',
      textStyle: { color: '#fff' },
      formatter: function (params) {
        const dataItem = chartData.value.find(item => item.age === params.name);
        return (
            params.name +
            "<br>" +
            "占比: " +
            (dataItem?.agePercent).toFixed(2) + "%"
        );
      }
    },
    legend: {
      orient: "vertical",
      left: "left",
      textStyle: { color: "#fff", fontSize: 14 }
    },
    series: [
      {
        name: "年龄分布",
        type: "pie",
        radius: "50%",
        data: chartData.value.map(item => ({
          name: item.age,
          value: item.agePercent * 100
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 20,
            shadowOffsetX: 0,
            shadowColor: "#1e90ff99"
          }
        },
        label: {
          color: '#fff',
          fontWeight: 'bold',
          fontSize: 14
        }
      }
    ]
  };

  myChart.setOption(option);
};

onMounted(async () => {
  try {
    // 从接口获取图表数据
    const chartResponse = await axios.get(chartApiUrl);
    if (chartResponse.data.code === 0) {
      chartData.value = chartResponse.data.data; // 将接口返回的图表数据存储到响应式变量中
      initChart(); // 初始化图表
    } else {
      console.error("图表接口返回错误：", chartResponse.data.message);
    }
  } catch (chartError) {
    console.error("获取图表数据失败：", chartError);
  }

  try {
    // 从接口获取结论内容
    const conclusionResponse = await axios.get(conclusionApiUrl);
    if (conclusionResponse.data.code === 0) {
      conclusionContent.value = conclusionResponse.data.data; // 将接口返回的结论内容存储到响应式变量中
    } else {
      console.error("结论接口返回错误：", conclusionResponse.data.message);
    }
  } catch (conclusionError) {
    console.error("获取结论内容失败：", conclusionError);
  }
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  margin: 20px auto;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.chart {
  width: 100%;
  height: 100%;
}

.chart-container:hover {
  transform: scale(1.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.conclusion-box {
  margin-top: 20px;
  padding: 15px;
  width: 90%;
  max-width: 800px;
  background: rgba(20, 40, 70, 0.95);
  border: 2px solid #1e90ff;
  border-radius: 8px;
  color: #fff;
}

.conclusion-box h3 {
  margin-bottom: 10px;
  font-size: 18px;
  color: #1e90ff;
  text-align: center;
}

.conclusion-box div {
  margin: 8px 0;
  line-height: 1.6;
  color: #fff;
  text-align: left;
}
</style>